<script setup lang="ts">
import { ref,h } from "vue";
import { useRole } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { message } from "@/utils/message";
import Refresh from "~icons/ep/refresh";
import { addDialog } from "@/components/ReDialog";
// import Wavesurfer from "../..//wavesurfer/index.vue";
import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
defineOptions({
  name: "GroupCallStatement"
});

const formRef = ref();
const {
  shortcuts,
  form,
  loading,
  columns,
  dataList,
  pagination,
  taskList,
  SeatsList,
  onSearch,
  resetForm,
  handleSizeChange,
  handleCurrentChange,
} = useRole();

const tabList = ref([
  {label:'点呼话单',value:'outboundCall'},
  {label:'群呼话单',value:'autoOutboundCall'}
])
const tabChange=(e)=>{
  dataList.value=[];
  pagination.currentPage=1;
  onSearch();
}
  // 通话录音
//   function handleListen(row) {
//   if (!row.record) return message(`此条数据无录音文件！`, { type: "error" });
//    addDialog({
//     title: "录音详情",
//     props: {
//       formInline: {
//         row,
//       }
//     },
//     width: "800px",
//     draggable: true,
//     fullscreen: deviceDetection(),
//     fullscreenIcon: true,
//     closeOnClickModal: false,
//     contentRenderer: () => h(),
//     beforeSure: (done, { options }) => {
//       done()
//     }
//   });
// }
const audio = ref(null)
</script>

<template>
  <div>
    <!-- <div class="cardTab">
    <el-radio-group v-model="form.orderType" size="large" @change="tabChange">
      <el-radio-button v-for="(item, index) in tabList" :key="index" :label="item.label" :value="item.value" />
    </el-radio-group>
  </div> -->
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
    >
      <!-- <el-form-item prop="project">
        <el-select
          v-model="form.project"
          placeholder="群呼项目"
          clearable
          class="w-[120px]!"
        >
          <el-option label="群呼" :value="0" />
        </el-select>
      </el-form-item> -->
      <el-form-item prop="task">
        <el-select
          v-model="form.task"
          placeholder="群呼任务"
          clearable
          class="w-[120px]!"
        >
          <el-option v-for="item in taskList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          class="w-[240px]!"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          value-format="X"
        />
      </el-form-item>
      <el-form-item prop="status">
        <el-select
          v-model="form.status"
          placeholder="客户状态"
          clearable
          class="w-[120px]!"
        >
          <el-option label="接通未确定" value="unkown" />
          <el-option label="无意向" value="refuse" />
          <el-option label="有意向" value="intend" />
        </el-select>
      </el-form-item>
      <el-form-item prop="seats">
        <el-select
          v-model="form.agentKey"
          placeholder="坐席"
          clearable
          class="w-[120px]!"
        >
          <el-option v-for="item in SeatsList" :key="item.id" :label="item.agentName" :value="item.agentKey" />
        </el-select>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input
          v-model="form.phone"
          placeholder="电话号码"
          clearable
          class="w-[200px]!"
          maxlength="11"
        />
      </el-form-item>
      <!-- <el-form-item prop="second">
        <el-input
          v-model="form.second"
          placeholder="时长超过"
          clearable
          class="w-[200px]!"
        >
          <template #append>秒钟</template>
        </el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri/search-line')"
          :loading="loading"
          @click="onSearch"
        >
          查询
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      title=""
      :columns="columns"
      @refresh="onSearch"
    >
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :adaptiveConfig="{ offsetBottom: 108 }"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
        <template #record="{ row }">
          <audio controls v-if="row.record" style="width: 180px;height: 30px;">
            <source :src="'https://sip.wxbqq.com'+row.record">
          </audio>
        </template>
      </pure-table>
      </template>
    </PureTableBar>
  </div>
  </div>
</template>

<style lang="scss" scoped>
.cardTab {
  margin: 0 !important;
  padding: 16px;
  background-color: #fff;
}
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 12px;
}

// .main {
//   margin: 12px 12px 0 !important;
// }

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
